<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>06.JSONP百度的下拉提示效果</title>
		<script src="./js/JSON.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				*zoom: 1;
			}
			.fl {
				float: left;
			}
			.fr {
				float: right;
			}
			.wrap {
				width: 400px;
				margin: 50px auto 0;
			}
			.wrap input {
				width: 390px;
				height: 50px;
				border: 1px solid #f90;
				font-size: 16px;
				padding: 0 0 0 10px;
				outline: none;
			}
			.wrap ul {
				width: 402px;
				display: none;
			}
			ul li {
				height: 50px;
				line-height: 50px;
				border: 1px solid #f90;
				border-top: 0 none;
			}
			ul a {
				display: block;
				height: 50px;
				text-decoration: none;
				padding: 0 0 0 10px;
			}
			ul a:hover {
				background-color: #ccc;
				color: #fff;
			}
		</style>
		<script>
			/**
			 * 百度JSONP搜索接口：http://suggestion.baidu.com/su?wd=d&cb=allen
			 * 百度关键字搜索接口：http://www.baidu.com/s?wd=kaikeba
			 */
			window.onload = function () {
				var oQ = document.getElementById("q");
				var oUl = document.getElementById("list");
				
				window.allen = function (data) {
					var html = '';
					if (data.s.length) {
						oUl.style.display = 'block';
						for ( var i = 0, len = data.s.length; i < len; i++ ) {
							html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+ data.s[i] +'">' + data.s[i] + '</a></li>';
						}
						oUl.innerHTML = html;
					} else {
						oUl.style.display = 'none';
					}
				};
				
				oQ.addEventListener('input', function () {
					if (this.value != '') {
						var oScript = document.createElement("script");
						oScript.src = 'http://suggestion.baidu.com/su?wd=' + this.value + '&cb=allen';
						document.body.appendChild(oScript);	
					} else {
						oUl.style.display = 'none';
					}
				}, false);
			};
		</script>
	</head>
	<body>
		<div class="wrap">
			<input type="text" id="q" />
			<ul id="list">
				<!--<li>
					<a href="javascript:;">11111111</a>
				</li>
				<li>
					<a href="javascript:;">22222222</a>
				</li>
				<li>
					<a href="javascript:;">33333333</a>
				</li>-->
			</ul>
		</div>
		<!--
			JSONP：JSON With Padding
			一个域名下去请求另外一个域名下的资源或文件，就会产生跨域的问题
			原理分析如下：
			1.动态创建script的方式来加载远程资源(script标签是不涉及跨域问题的)
			2.在资源加载进来之前定义好一个函数，这个函数接收一个参数(数据),函数
			里面利用这个参数做一些事情，然后在需要的时候通过动态创建script标签来
			加载对应的远程资源，当远程的资源文件被加载进来的时候，就会去执行我们
			前面定义好的函数，并且把数据作为这个函数的参数传入进去
		-->
	</body>
</html>
